<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">车辆信息填写</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <car-header></car-header>
        <div class="car-content">
            <group class="car__formPolicy--group">
                <cell class="car-insure-list">
                    <span class="car__list--title" slot="after-title">
                        <img slot="icon" src="~assets/car/base-info.png" class="go-back car-list-img">
                        <span style="color: #fff;" class="car__iconspan--title">车辆基本信息</span>
                    </span>
                </cell>

                <div class="car__formPolicy">
                    <div>
                        <x-input v-model="tprpTitemCarDto.vehicleModel" placeholder="品牌型号" class="carinfo-input base-input_font" :min="2" :max="50" required>
                            <div class="car__input" slot="label">
                                品牌型号
                            </div>
                        </x-input>
                        <x-input v-model="tprpTitemCarDto.vinNo" placeholder="车架号" class="carinfo-input base-input_font" :min="7" :max="17" required>
                            <div class="car__input" slot="label">
                                车架号
                            </div>
                        </x-input>
                        <x-input v-model="tprpTitemCarDto.engineNo" placeholder="发动机号" class="carinfo-input base-input_font" :max="18" required>
                            <div class="car__input" slot="label">
                                发动机号
                            </div>
                        </x-input>
                        <datetime placeholder="" v-model="tprpTitemCarDto.purchaseDate" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input" slot="title">
                                购买日期
                            </div>
                        </datetime>
                        <datetime placeholder="" v-model="tprpTitemCarDto.enrollDate" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input carselector-color" slot="title">
                                车辆初始登日期
                            </div>
                        </datetime>
                        <selector class="carinfo-selector carselector-color" ref="defaultValueRef" title="车辆类型" :options="carKindList" v-model="tprpTitemCarDto.carKindCode"></selector>

                        <selector class="carinfo-selector carselector-color" ref="defaultValueRef" title="车辆使用性质" :options="useNatureList" v-model="tprpTitemCarDto.useNatureCode"></selector>
                        <cell>
                            <div slot="inline-desc" class="carselector-color">是否过户车</div>
                            <div slot="default">
                                <!-- <input v-model="tprpTitemCarDto.chgOwnerFlag" type="checkbox" class="weui-switch"> -->
                                <check-icon :value.sync="tprpTitemCarDto.chgOwnerFlag">
                                    <span class="car__policyHolderType car__middle">
                                    </span>
                                </check-icon>
                            </div>
                        </cell>
                        <datetime v-show="tprpTitemCarDto.chgOwnerFlag" placeholder="" v-model="tprpTitemCarDto.transferDate" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input" slot="title">
                                转移登记日期
                            </div>
                        </datetime>
                        <cell>
                            <div slot="inline-desc" class="carselector-color">是否车贷投保多年标志</div>
                            <div slot="default">
                                <check-icon :value.sync="tprpTitemCarDto.loanVehicleFlag">
                                    <span class="car__policyHolderType car__middle">
                                    </span>
                                </check-icon>
                            </div>
                        </cell>
                    </div>
                </div>
            </group>
        </div>
        <div style="height: 60px;"></div>
        <div class="car_footer">
            <div class="car_leftbtn">
                <div class="details-alert">
                    <img slot="icon" style="width: 15px;" src="~assets/x3/ico/smal-1.png">&nbsp提示:&nbsp型号越详细查询越准确
                </div>
                <!-- <span>999</span> -->
            </div>
            <div @click="goCarSelect()" class="car_rightbtn">下一步</div>
        </div>

    </div>
</template>

<script>
import carHeader from "src/components/car/carHeader";
import { RequestUrl } from "src/common/url";
// import Config from "src/common/config/insureConfig";
// import CarConfig from "src/common/config/carConfig";
import {
    Car_Mutations,
    RouteUrl,
    intervalTime
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        Actionsheet,
        TransferDom,
        Toast,
        CheckIcon,
        carHeader
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        carAddr: "carAddr",
        shareData: "shareData",
        initIndexData: "initIndexData",
        car: "car"
    }),
    data() {
        return {
            tprptCarOwnerDto: {
                name: ""
            },
            beginTime: DateUtil.getDateyMdSubtract(intervalTime.YEAR),
            endTime: DateUtil.getNowDateStr_Ymd(),
            type: "car",
            useNatureList: [],
            carKindList: [],
            seleCarKind: "A0",
            hourseType: [], //房屋类型
            datatime: DateUtil.getNowDateStr_Ymd(),
            buildStructure: "",
            // defaultMen: "法定受益人"
            tprpTitemCarDto: {            //投保标的信息
                id: 0,
                flowId: "",
                countryCode: "",
                runAreaCode: "",
                whethelicenses: "",
                whethercar: "",
                newOldLogo: "",
                licenseNo: "",
                carKindCode: "",
                useNatureCode: "",
                engineNo: "",
                vinNo: "",
                licenseKindCode: "",
                enrollDate: "",
                purchasePrice: 0,
                tonCount: 0,
                exhaustScale: 0,
                seatCount: 0,
                fuelType: "",
                carOwner: "",
                purchaseDate: "",
                actualValue: "",
                modelCode: "",
                vehicleModel: "",
                vehicleCategoryCode: "",
                chgOwnerFlag: false,
                loanVehicleFlag: false,
                transferDate: "",
                poWeight: "",
                vinNoQueryFlag: "",
                certificateDate: "",
                certificateNo: "",
                certificateType: "",
                madeDate: "",
                vehicleStyleDesc: "",
                madeFactory: "",
                vehicleBrand: "",
                certificateDate2: "",
                carInsuredRelation: "",
                companyType: "",
                loanBeneficiary: ""
            },
            isGetInitSele: false,
            renewalFlag: "0",
        };
    },
    watch: {
        'tprpTitemCarDto.carKindCode': {
            handler(cur, old) {
                if (cur != true && this.car.isGetNalInit) {
                    this.setNatureList();
                }
            }
        },
        'tprpTitemCarDto.chgOwnerFlag': {
            handler(cur, old) {
                if (cur && this.tprpTitemCarDto.transferDate == "") {
                    this.tprpTitemCarDto.transferDate = DateUtil.getNowDateStr_Ymd();
                }
                // this.useNatureList = CarConfig.getCarKind(this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto.natureOfRole, this.tprpTitemCarDto.carKindCode);
                // if (!cur) {
                //     this.setQueryInfo();
                // }
            }
        },
    },
    filters: {
    },
    methods: {
        setNatureList() {
            // this.useNatureList = CarConfig.getUseNature(this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto.natureOfRole, this.tprpTitemCarDto.carKindCode);

            let nature = this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto.carInsuredRelation;
            console.log(nature);
            let carKind = this.tprpTitemCarDto.carKindCode;
            // if (nature == 2) {
            //     nature = 4;
            // } else {
            //     nature = 3;
            // }
            if (carKind == "") {
                return;
            }
            let query = {
                _this: this,
                insuredNature: nature,
                carKind: carKind
            }
            this.$common.storeCommit(this, Car_Mutations.GET_USER_NATURE_LIST, query);

        },
        baseVal() {
            if (this.tprpTitemCarDto.vehicleModel == "") {
                return this.showErrorMsg("品牌型号不能为空");
            }
            if (this.tprpTitemCarDto.vinNo == "") {
                return this.showErrorMsg("车架号不能为空");
            }
            if (this.tprpTitemCarDto.vinNo == "") {
                return this.showErrorMsg("车架号不能为空");
            }
            this.tprpTitemCarDto.vinNo = this.tprpTitemCarDto.vinNo.toUpperCase();
            if (Validation.vinNoVal(this.tprpTitemCarDto.vinNo)) {
                return this.showErrorMsg("车架号格式不正确");
            }
            if (this.tprpTitemCarDto.engineNo == "") {
                return this.showErrorMsg("发动机号不能为空");
            }
            if (this.tprpTitemCarDto.carKindCode == "") {
                return this.showErrorMsg("车辆类型不能为空");
            }
            if (this.tprpTitemCarDto.useNatureCode == "") {
                return this.showErrorMsg("车辆适应性质不能为空");
            }

            return true;
        },
        showErrorMsg(errorMsg) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            // setTimeout(() => {
            //   this.$vux.alert.hide();
            // }, 3000);
            return false;
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.CAR_INSURE_INFO);
        },
        setQueryInfo() {
            let _this = this;
            setTimeout(() => {
                // debugger
                if (typeof (_this.car.carInfoList[_this.car.licenseNo]) == "undefined") {
                    return;
                }
                _this.tprptCarOwnerDto = _this.car.carInfoList[_this.car.licenseNo].tprptCarOwnerDto;
                _this.tprpTitemCarDto = _this.car.carInfoList[_this.car.licenseNo].tprpTitemCarDto;
                _this.renewalFlag = _this.car.carInfoList[_this.car.licenseNo].renewalFlag;
                if (_this.tprpTitemCarDto.chgOwnerFlag == "0") {
                    _this.tprpTitemCarDto.chgOwnerFlag = false;
                } else {
                    _this.tprpTitemCarDto.chgOwnerFlag = true;
                }

                if (_this.tprpTitemCarDto.loanVehicleFlag == "0") {
                    _this.tprpTitemCarDto.loanVehicleFlag = false;
                } else {
                    _this.tprpTitemCarDto.loanVehicleFlag = true;
                }
                _this.carKindList = _this.car.carKindList;
                if (_this.tprpTitemCarDto.carKindCode == "") {
                    _this.tprpTitemCarDto.carKindCode = _this.carKindList[0].key;
                }
                _this.setNatureList();
            }, 100);
        },
        saveData() {
            if (sessionStorage["CAR_FORM_URL"] != "/") {
                this.$common.storeCommit(this, Car_Mutations.SAVE_DATA_CAR_INFO, this);
            }
        },
        goCarSelect() {
            if (this.baseVal()) {
                // let data = {
                //     _this: this,
                //     vinNo: this.tprpTitemCarDto.vinNo,
                //     modelName: this.tprpTitemCarDto.vehicleModel
                // }
                // this.$common.storeCommit(this, Car_Mutations.GET_SALE_QUERY_VIN_NO, data);

                if (this.renewalFlag == "1") {
                    this.$common.goUrl(this, RouteUrl.ADD_CAR_INFO);
                } else {
                    this.$common.goUrl(this, RouteUrl.CAR_SELECT);
                }
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CAR_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
    },
    beforeDestroy() {
        this.saveData();
    },
    mounted() {
        let _this = this;
        document.title = '车辆信息填写';
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        // if (!this.car.isQueryCar) {
        this.setQueryInfo();
        this.$init.subPageInit(this);
        // }
        //初始化，没有footer
        // this.carKindList = CarConfig.getCarKind();


        // window.addEventListener('load', function() {
        //     _this.saveData();
        // });
        // window.addEventListener('popstate', function(ev) {
        //     _this.saveData();
        // });
        // this.hourseType = Config.getHouseType();
        //添加上一个页面的价钱

    }
};
</script>
<style lang="scss">
@import "~styles/carCommon";
</style>

<style  lang="scss">
.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.car-input {
  .weui-cell__bd {
    input {
      text-transform: uppercase;
    }
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__input-datatime {
  height: 24px;
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}
.carinfo-selector {
  .weui-label {
    line-height: 0px;
    font-size: 14px;
  }
  select {
    direction: rtl;
  }
}
input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.carinfo-input {
  input {
    text-align: right;
  }
}
</style>
